<template>
  <div>
    <el-form label-position="right" label-width="80px">
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="选择用例">
            <el-select v-model="caseInfo.caseId" placeholder="用列名称" style="width: 100%" @change="selectCase">
              <el-option v-for="option in allCases" :key="option.caseId" :value="option.caseId" :label="option.caseName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用列名称">
            <el-input v-model="caseInfo.caseName" placeholder="用列名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="0" style="text-align: center">
        <el-button-group style="z-index: 99">
          <el-button type="primary" :loading="loading" icon="el-icon-check" @click="saveCase(false)">{{ caseInfo.caseId ? '更新' : '保存' }}用列</el-button>
          <el-button v-if="caseInfo.caseId" type="success" :loading="loading" icon="el-icon-check" @click="saveCase(true)">另存用列</el-button>
          <el-button type="warning" :loading="loading" icon="el-icon-video-play" @click="testRequest">测试请求</el-button>
          <el-button type="danger" :loading="loading" icon="el-icon-check" @click="saveRequest">{{ request.requestId ? '更新' : '保存' }}请求</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <div style="display: flex;flex-flow: row nowrap;width: 100%">
      <idea-code ref="inRef" v-model="caseInfo.input" :config="{language: 'json'}" style="height: calc(100vh - 420px);width: 100%;"></idea-code>
      <idea-code ref="outRef" v-model="caseInfo.output" :config="{language: 'json'}" style="height: calc(100vh - 420px);width: 100%;"></idea-code>
    </div>
  </div>
</template>

<script>
import IdeaCode from "@/components/idea-code/IdeaCode";
export default {
  name: "RequestCase",
  components: {IdeaCode},
  props: {
    request: {
      type: Object,
      default: function () {
        return { requestId: '0' }
      }
    }
  },
  data() {
    return {
      loading: false,
      caseInfo: {},
      allCases: []
    }
  },
  mounted() {
    this.loadCases()
  },
  methods: {
    loadCases(){
      this.$post('requestCase/queryPage',{
        page: 1, pageSize: -1, filters: [{
          field: 'requestId', op: '=', value: this.request.requestId
        }]
      }).then(res => {
        this.allCases.splice(0, this.allCases.length)
        const list = res.data.records || []
        list.forEach(item => {
          this.allCases.push(item)
        })
      })
    },
    selectCase(val){
      const item = this.allCases.find(item => item.caseId === val)
      if (item) {
        this.$Util.cleanObj(this, this.caseInfo)
        this.$Util.copyAttr(item, this.caseInfo, null, this)
        this.caseInfo.input = JSON.parse(this.caseInfo.inputArgs)
        this.caseInfo.output = JSON.parse(this.caseInfo.outputArgs)
        this.$refs.inRef.setValue(this.caseInfo.input)
        this.$refs.outRef.setValue(this.caseInfo.output)
      }
    },
    saveCase(create){
      this.loading = true
      this.caseInfo.inputArgs = JSON.stringify(this.caseInfo.input)
      this.caseInfo.outputArgs = JSON.stringify(this.caseInfo.output)
      this.caseInfo.requestId = this.request.requestId
      if (create) {
        this.caseInfo.caseId = ''
      }
      this.$post('requestCase/save', this.caseInfo)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              this.$Util.copyAttr(res.data, this.caseInfo, null,this)
            }
            this.loadCases()
            setTimeout(() => {
              this.loading = false
            }, 300)
          })
    },
    saveRequest() {
      this.$post('request/save', this.request)
      .then(res => {
        this.$resultMsg(this, res)
      })
    },
    testRequest() {
      this.loading = true
      this.$post('request/callRequest/' + this.request.callCmd, this.caseInfo.input )
          .then(res => {
            this.$set(this.caseInfo, 'output', res)
            this.$refs.outRef.setValue(res)
            setTimeout(() => {
              this.loading = false
            }, 300)
          })
    }
  }
}
</script>

<style scoped>

</style>
